<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../styles/ball.css">
</head>

<body>
    <div id="ball" class="ball"></div>
    <div class="box" style="position: absolute; top: 70px;">
        <label for="pos">输入小球移动后的位置：</label>
        <input type="number" id="pos" />
        <button id="moveBtn">开始移动</button>
        <button id="cancelBtn">撤销</button>
    </div>

    <script src="./animate.js"></script>
    <script>
        let ball = document.getElementById('ball');
        let pos = document.getElementById('pos');
        let moveBtn = document.getElementById('moveBtn');
        let cancelBtn = document.getElementById('cancelBtn');

        class MoveCommand {
            constructor(receiver, pos) {
                this.receiver = receiver;
                this.pos = pos;
                this.oldPos = null;
            }

            execute() {
                this.receiver.start('left', this.pos, 2000, 'strongEaseOut');

                // 记录小球开始移动前的位置
                // 为什么放到下面执行？因为 start 之后才设置 receiver.propertyName
                let props = this.receiver.dom.getBoundingClientRect();
                this.oldPos = props[this.receiver.propertyName];
            }

            undo() {
                this.receiver.start('left', this.oldPos, 2000, 'strongEaseOut');
            }
        }

        let moveCommand;
        moveBtn.onclick = () => {
            let animate = new Animate(ball);
            moveCommand = new MoveCommand(animate, pos.value);
            moveCommand.execute();
        }
        cancelBtn.onclick = () => {
            moveCommand.undo();
        }
    </script>
</body>

</html>